iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
1
Modern Web

For 前端小幼苗的圖解筆記系列 第 8

[HTML] 關於 HTML

  • 分享至 

  • xImage
  •  

HTML

  • HTML (是簡稱所以大寫)
  • HTML 是標記語言不是程式語言(標記 Markup、沒有程式邏輯)
  • 超文本標記語言:重點是「標記」-把文件用標記標起來
  • 描述一個網站的結構語意

簡史

  • 演進:html4.0 → html4.01 → XHTML1.0 → HTML5.0
  • HTML5 只是HTML最新的修訂版本(2014/06)
  • 廣義論及的 HTML5 =
    HTML + CSS + JavaScript(三大中心技術組合)
    目的:減少瀏覽器對外掛程式的需求
  • HTML中新增項(語法特徵):
    • Video、Audio、Canvas、整合SVG
    • 加強網頁的文件結構性(語意)

資料結構

  • 做網頁:使用HTML將「文件」轉換成「網頁」
    HTML只是把文件標記成網頁
    例如手抄資料編輯成Word(設定標題/內文...等)

  • 拿到文件時

    • 判斷標題/內文...等(結構)
    • 思考如何定義清楚
    • 將文件做成標記(HTMLL)
      主標題 -> h1
      副標題 -> h2
      內文 -> p

    以正確的標籤賦予它正確的意義

  • 標籤使用會影響搜尋引擎解讀&盲人檢索
    如選單用<nav>包爬蟲才明確知道為主選單

    • 網站資訊量很大很多、如何知道網頁的重點是什麼?
      搜尋引擎在爬的時候要分析重點是什麼?
  • 有些是寫給瀏覽器/爬蟲看的 
    <head>裡的 <title>→人、 <meta>→程式)
    有些是寫給人看的<body>

標籤

  • 不同的標籤有不同的屬性

  • <標籤>資料</標籤>
    <p> text </p>

  • <標籤 屬性="值">資料</標籤>
    <a href=""> LINK </a>
    <信 收件地址 = "">名字<>

  • <標籤 屬性1="值1" 屬性2="值2">資料</標籤>
    <a href="http://google.com" target="_blank"> Google</a>

  • 自閉標籤 <標籤 屬性="值">


補充觀念 ID & Class

ID & Class

  • 首字不得為數字、可中線/底線
  • 大小寫不同
  • 其實可以用中文跟Emoji、但實務上不會這麼用
  • 依據ID的唯一性,理論上瀏覽器搜尋到第一個符合的ID就不會繼續搜尋,所以指定ID性能較Class佳,但瀏覽器對"CSS"的處理流程找到第一個ID後仍繼續尋找,故以CSS而言選取ID效能沒有較佳

ID

  • ID 名稱不可重複
  • 一個物件不可有兩個 ID 名
  • 瀏覽器處理CSS樣式時其實多重ID仍會正常顯示
    但程式運作(如 JS )則會有問題

Class

  • Class可多個、可重複

Name

  • 與後端串接時認Name名

區塊命名

定義區塊常用命名

  • 頂部 header
  • 內容 content / container
  • 尾部 footer
  • 選單 nav / navigation
  • 側欄 sidebar
  • 欄目 column
  • 控制整體佈局寬度 wrap / wrapper
  • 主要區域(通常為頁面主要內容部份) primary
  • 次要區域 (通常為次選單) secondary

參考資料:


個人 Blog: https://eudora.cc/


上一篇
[Git] 應用情境
下一篇
[CSS] 元素置中的 N 個方法
系列文
For 前端小幼苗的圖解筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言